<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title >登录</title>
    <link rel="icon" th:if="${system_config.icoUrl == ''}" th:href="@{/images/logo.png}"/>
    <link rel="icon" th:if="${system_config.icoUrl != ''}" th:href="${system_config.icoUrl}"/>
    <!-- 引入 layui.css -->
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <!-- 引入 layui.js -->
    <script th:src="@{/layui/layui.js}"></script>
    <script th:src="@{/js/utils.js}"></script>
    <script th:src="@{/js/netJs/js.cookie.min.js}"></script>
    <script th:src="@{/js/netJs/crypto-js.min.js}"></script>
    <script th:src="@{/js/netJs/sm2.js}"></script>
    <script th:src="@{/js/netJs/sm3.js}"></script>
    <script th:src="@{/js/netJs/sm4.js}"></script>
    <script  th:replace="config::common-config"></script>
</head>
<style>
    body {
        background-color: #f7f7f7;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
    }
    .title{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .logo{
        width:30px;
    }
    @media screen and (max-width: 767.98px) {
        .layui-container {
            padding: 0 15px;
            width: 100vw;
        }
    }
</style>
<body>

<div class="layui-container">
    <div class="layui-row ">
        <div class="layui-col-xs12 layui-col-md4 layui-col-md-offset4 ">
            <div class="layui-panel layui-padding-2">
                <form class="layui-form" lay-filter="val-filter">
                    <div class="layui-row ">
                        <div class="layui-col-xs12 layui-col-md10 layui-col-md-offset1 ">
                            <div class="layui-text layui-font-black layui-font-24 layui-padding-3" style="align-items: center">
                                <div class="title">
                                    <img class="logo layui-anim-rotate" th:if="${system_config.logoUrl == ''}" th:src="@{/images/logo.png}"><img class="logo layui-anim-rotate" th:if="${system_config.logoUrl != ''}" th:src="@{/images/logo.png}">
                                    <span th:text="${system_config.title}"> title</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-row ">
                        <div class="layui-col-xs12 layui-col-md10 layui-col-md-offset1 ">
                            <div class="layui-form-item">
                                <div class="layui-input-wrap">
                                    <div class="layui-input-prefix">
                                        <i class="layui-icon layui-icon-username"></i>
                                    </div>
                                    <input autocomplete="off" class="layui-input" lay-reqtext="请填写用户名"
                                           lay-verify="required"
                                           name="username" placeholder="用户名" type="text" value="">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-row ">
                        <div class="layui-col-xs12 layui-col-md10 layui-col-md-offset1 ">
                            <div class="layui-form-item">
                                <div class="layui-input-wrap">
                                    <div class="layui-input-prefix">
                                        <i class="layui-icon layui-icon-password"></i>
                                    </div>
                                    <input autocomplete="off" class="layui-input" lay-reqtext="请填写密码"
                                           lay-verify="required"
                                           name="password" placeholder="密   码" type="password" value="">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-row ">
                        <div class="layui-col-xs12 layui-col-md10 layui-col-md-offset1 ">
                            <div class="layui-form-item">
                                <div class="layui-input-wrap">
                                    <div id="slider"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-row ">
                        <div class="layui-col-xs12 layui-col-md10 layui-col-md-offset1 ">
                            <div class="layui-form-item">
                                <input lay-skin="primary" name="remember" title="记住密码" type="checkbox">
                                <a href="#forget" style="float: right; margin-top: 7px;">忘记密码？</a>
                            </div>
                        </div>
                    </div>
                    <div class="layui-row ">
                        <div class="layui-col-xs12 layui-col-md10 layui-col-md-offset1 ">
                            <div class="layui-form-item">
                                <button class="layui-btn layui-btn-fluid" lay-filter="demo-login" lay-submit>登录</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script>
    //一般直接写在一个js文件中
    layui.config({
        base: 'layui/extend/sliderVerify/'
    }).use(['sliderVerify', 'jquery', 'form'], function () {
        var sliderVerify = layui.sliderVerify
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.jquery;

        var account = layui.data('account');

        if (message) {
            layer.msg(message, {icon: 0})
        }

        var slider = sliderVerify.render({
            elem: '#slider'
        })
        if (account.remember) {
            form.val('val-filter', {
                username: top.tools.crypto.SM4.decrypt(account.username),
                password: top.tools.crypto.SM4.decrypt(account.password)
            });
            $('input[name=remember]').prop('checked', true)
        }

        // 通过事件简单演示动画过程
        $('.logo').on('mouseover', function(e){
            let el = $(this)
            el.removeClass('layui-anim-rotate');
            setTimeout(function(){
                el.addClass('layui-anim-rotate');
            });
        });

        // 提交事件
        form.on('submit(demo-login)', function (data) {
            var field = data.field; // 获取表单字段值
            if (slider.isOk()) {//用于表单验证是否已经滑动成功
                let remember = $('input[name=remember]').prop('checked');
                if (remember === true) {
                    layui.data('account', {key: 'username', value: top.tools.crypto.SM4.encrypt(field.username)});
                    layui.data('account', {key: 'password', value: top.tools.crypto.SM4.encrypt(field.password)});
                    layui.data('account', {key: 'remember', value: remember});
                }else{
                    layui.data('account', null);
                }
                var loadIndex = layer.msg('正在登录', {
                    icon: 16,
                    shade: 0.01,
                    time:false
                });
                top.tools.ajax({
                    url: '/login',
                    type: 'POST',
                    loading:false,
                    dataType:'json',
                    data:{
                        username:field.username,
                        password:field.password,
                        remember:remember
                    },
                    successFun: function(res){
                        if (res.code == 200){
                            // top.tools.cookie.set('token',res.data)
                            top.tools.cache.setUser(res.data.user)
                            window.location.href = window.location.origin + top.tools.getBaseUrl() + "/index"
                        }
                    },
                    errorFun:function (res){
                        layer.close(loadIndex)
                    }
                })

            }
            return false; // 阻止默认 form 跳转
        });

    })
</script>
</body>

</html>